<!doctype html>
<html lang="en" ng-app="net">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Chrome HAR Viewer</title>
  <meta name="description" content="An HTTP Archive (HAR) Viewer that mimics Chrome Developer Tools">

  <!-- Required Chrome Dev Tools CSS -->
  <link rel="stylesheet" type="text/css" href="chrome/dialog.css">
  <link rel="stylesheet" type="text/css" href="chrome/inspector.css">
  <link rel="stylesheet" type="text/css" href="chrome/inspectorCommon.css">
  <link rel="stylesheet" type="text/css" href="chrome/inspectorSyntaxHighlight.css">
  <link rel="stylesheet" type="text/css" href="chrome/popover.css">
  <link rel="stylesheet" type="text/css" href="chrome/dataGrid.css">
  <link rel="stylesheet" type="text/css" href="chrome/tabbedPane.css">
  <link rel="stylesheet" type="text/css" href="chrome/splitView.css">
  <link rel="stylesheet" type="text/css" href="chrome/networkLogView.css">
  <link rel="stylesheet" type="text/css" href="chrome/networkPanel.css">
  <link rel="stylesheet" type="text/css" href="chrome/networkLogView.css">

  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/libs/modernizr.custom.min.js"></script>
</head>
<body class="detached" ng-controller="NetworkCtrl" dnd-drop="dnd.drop($event)" dnd-dragover="dnd.cancel($event)" dnd-dragenter="dnd.cancel($event)">
  <div id="dropArea" class="visible" >
    <h2 class="support"><span>Drag and <em>Drop</em> HARs here</span></h2>
    <h2 class="no-support">Your browser doesn't support Drag and Drop, or some other modern required features. :-p</h2>
  </div>

  <div id="toolbar">
    <div class="toolbar-controls">
      <div class="toolbar-item" id="toolbar-sample-item">
        <a href="#" class="sample">Load sample HAR</a>
      </div>
      <div class="toolbar-item" id="toolbar-search-item">
        <input id="search" type="search" incremental="" results="0" placeholder="Search Network" ng-model="query">
      </div>
    </div>
    <button class="toolbar-item toggleable network toggled-on">
      <div class="toolbar-icon"></div>
      <div class="toolbar-label">Network</div>
    </button>
  </div>
  <div id="main">
    <div id="main-status-bar" class="status-bar">
      <div id="anchored-status-bar-items">
        <button class="settings-status-bar-item status-bar-item" title="Settings">
          <div class="glyph"></div><div class="glyph shadow"></div>
        </button>
      </div>
      <div>
        <button ng-click="class='small'" class="network-larger-resources-status-bar-item status-bar-item toggled-on" title="Use small resource rows.">
          <div class="glyph"></div><div class="glyph shadow"></div>
        </button>
        <div class="scope-bar status-bar-item" id="network-filter">
          <li ng-class="getClass('all')" class="all" ng-click="type.mimeType='';sI='all'">All</li>
          <div class="scope-bar-divider"></div>
          <li ng-class="getClass('doc')" class="document" ng-click="type.mimeType='text/html';sI='doc'">Documents</li>
          <li ng-class="getClass('css')" class="stylesheet" ng-click="type.mimeType='text/css';sI='css'">Stylesheets</li>
          <li ng-class="getClass('img')" class="image" ng-click="type.mimeType='image/';sI='img'">Images</li>
          <li ng-class="getClass('js')" class="script" ng-click="type.mimeType='text/javascript';sI='js'">Scripts</li>
          <li ng-class="getClass('xhr')" class="xhr" ng-click="type.mimeType='application/x-javascript';sI='xhr'">XHR</li>
          <li ng-class="getClass('fnt')" class="font" ng-click="type.mimeType='application/octet-stream';sI='fnt'">Fonts</li>
          <li ng-class="getClass('sck')" class="websocket" ng-click="sI='sck'">WebSockets</li>
          <li ng-class="getClass('oth')" class="other" ng-click="sI='oth'">Other</li>
        </div>
      </div>
    </div>
    <div id="main-panels" class="visible">
      <div class="panel network visible">
        <div class="split-view visible">
          <div class="split-view-contents split-view-sidebar-left maximized">
            <div id="network-container" class="visible">
              <div class="data-grid network-log-grid visible filter-all" tabindex="0">
                <table class="header">
                  <colgroup span="7">
                    <col class="first">
                    <col class="sec">
                    <col class="third">
                    <col class="fourth">
                    <col class="five">
                    <col class="six">
                    <col class="sev">
                  </colgroup>
                  <tbody>
                    <tr>
                      <th class="name-column sortable" ng-click="setSort('nameSort');">
                        <div>Name<div class="network-header-subtitle">Path</div></div>
                      </th>
                      <th class="method-column sortable" ng-click="setSort('method');">
                        <div>Method</div>
                      </th>
                      <th class="status-column sortable" ng-click="setSort('status');">
                        <div>Status<div class="network-header-subtitle">Text</div></div>
                      </th>
                      <th class="type-column sortable" ng-click="setSort('mimeType');">
                        <div>Type</div>
                      </th>
                      <th class="size-column sortable" ng-click="setSort('size');">
                        <div>Size<div class="network-header-subtitle">Content</div></div>
                      </th>
                      <th class="time-column sortable" ng-click="setSort('timeSort')">
                        <div>Time<div class="network-header-subtitle">Latency</div></div>
                      </th>
                      <th class="timeline-column sort-ascending">
                        <select>
                          <option value="startTime" label="Timeline"></option>
                          <option value="startTime" label="Start Time"></option>
                          <option value="responseTime" label="Response Time"></option>
                          <option value="endTime" label="End Time"></option>
                          <option value="duration" label="Duration"></option>
                          <option value="latency" label="Latency"></option>
                        </select>
                      </th>
                      <th class="corner"></th>
                    </tr>
                  </tbody>
                </table>

                <div class="data-container" ng-repeat="page in pages">
                  <div class="page-wrapper">
                  <table class="data">
                    <colgroup span="7">
                      <col class="first">
                      <col class="sec">
                      <col class="third">
                      <col class="fourth">
                      <col class="five">
                      <col class="six">
                      <col class="sev">
                    </colgroup>
                    <thead ng-show="checked">
                      <tr class="revealed page-summary-bar">
                        <td colspan="7">{{page.id}} {{page.title}}</td>
                      </tr>
                    </thead>
                    <tfoot ng-show="checked">
                      <tr class="revealed network-summary-bar">
                        <!-- FixMe: This always assume ms -->
                        <td colspan="7">{{page.count}} requests  ❘  {{page.transfer}} transferred  ❘  <!-- TODO: Need the time here; --> (onload: {{page.pageTimings.onLoad}}ms, DOMContentLoaded: {{page.pageTimings.onContentLoad}}ms)</td>
                      </tr>
                    </tfoot>
                    <tbody>
                      <tr ng-class="getSelectedRow($index)" class="revealed network-item network-type-{{entry.name}}" data-id="{{entry.id}}" ng-repeat="entry in page.entries | filter:query | filter:type | orderBy:predicate:reverse">
                        <td class="name-column" ng-click="showDetails($index)"><div title="{{entry.url}}"><img class="icon">{{entry.parsedURL.lastPathComponent}}<div class="network-cell-subtitle">{{entry.folder}}</div></div></td>
                        <td class="method-column"><div title="{{entry.method}}">{{entry.method}}</div></td>
                        <td class="status-column"><div title="{{entry.status}} {{entry.statusText}}">{{entry.status}}<div class="network-cell-subtitle">{{entry.statusText}}</div></div></td>
                        <td class="type-column"><div title="{{entry.mimeType}}">{{entry.mimeType}}</div></td>
                        <td class="size-column"><div title="{{entry.size}}">{{entry.size}}<div class="network-cell-subtitle">{{entry.contentSize}}</div></div></td>
                        <td class="time-column"><div title="{{entry.time}}">{{entry.time}}<div class="network-cell-subtitle">{{entry.latency}}</div></div></td>
                        <td class="timeline-column">
                          <div class="network-graph-side network-type-{{entry.name}}">
                            <div class="network-graph-bar-area">
                              <div class="network-graph-bar waiting" style="left: {{entry.graphs.latency_left}}%; right: {{entry.graphs.latency_right}}%;" title=""></div>
                              <div class="network-graph-bar" style="left: {{entry.graphs.receiving_left}}%;  right: {{entry.graphs.receiving_right}}%;" title=""></div>
                              <div class="network-graph-label waiting" title="">{{entry.latency}}</div>
                              <div class="network-graph-label after" title="">{{entry.receiveTime}}</div>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                <div class="network-timeline-grid" ng-show="checked">
                  <div id="resources-graphs"></div>
                    <div class="resources-dividers">
                      <div class="resources-divider first" style="left: 8.333333333333338%"></div>
                      <div class="resources-divider" style="left: 16.666666666666668%; "></div>
                      <div class="resources-divider" style="left: 25%; "></div>
                      <div class="resources-divider" style="left: 33.333333333333336%; "></div>
                      <div class="resources-divider" style="left: 41.66666666666667%; "></div>
                      <div class="resources-divider" style="left: 50%; "></div>
                      <div class="resources-divider" style="left: 58.333333333333336%; "></div>
                      <div class="resources-divider" style="left: 66.66666666666667%; "></div>
                      <div class="resources-divider" style="left: 75%; "></div>
                      <div class="resources-divider" style="left: 83.33333333333334%; "></div>
                      <div class="resources-divider" style="left: 91.66666666666667%; "></div>
                      <div class="resources-divider last" style="left: 100%; "></div>
                    </div>
                    <div class="resources-event-dividers">
                      <div class="network-event-divider-padding" title="Load event fired" style="left: {{page.load_event_left}}%; ">
                        <div class="network-event-divider network-red-divider"></div>
                      </div>
                      <div class="network-event-divider-padding" title="DOMContent event fired" style="left: {{page.content_load_left}}%; ">
                        <div class="network-event-divider network-blue-divider"></div>
                      </div>
                    </div>
                    <div class="resources-dividers-label-bar">
                      <div class="resources-divider first" style="left: 8.333333333333338%; ">
                        <div class="resources-divider-label">{{labels.1}}</div>
                      </div>
                      <div class="resources-divider" style="left: 16.666666666666668%; ">
                        <div class="resources-divider-label">{{labels.2}}</div>
                      </div>
                      <div class="resources-divider" style="left: 25%; ">
                        <div class="resources-divider-label">{{labels.3}}</div>
                      </div>
                      <div class="resources-divider" style="left: 33.333333333333336%; ">
                        <div class="resources-divider-label">{{labels.4}}</div>
                      </div>
                      <div class="resources-divider" style="left: 41.66666666666667%; ">
                        <div class="resources-divider-label">{{labels.5}}</div>
                      </div>
                      <div class="resources-divider" style="left: 50%; ">
                        <div class="resources-divider-label">{{labels.6}}</div>
                      </div>
                      <div class="resources-divider" style="left: 58.333333333333336%; ">
                        <div class="resources-divider-label">{{labels.7}}</div>
                      </div>
                      <div class="resources-divider" style="left: 66.66666666666667%; ">
                        <div class="resources-divider-label">{{labels.8}}</div>
                      </div>
                      <div class="resources-divider" style="left: 75%; ">
                        <div class="resources-divider-label">{{labels.9}}</div>
                      </div>
                      <div class="resources-divider" style="left: 83.33333333333334%; ">
                        <div class="resources-divider-label">{{labels.10}}</div>
                      </div>
                      <div class="resources-divider" style="left: 91.66666666666667%; ">
                        <div class="resources-divider-label">{{labels.11}}</div>
                      </div>
                      <div class="resources-divider last" style="left: 100%; ">
                        <div class="resources-divider-label">{{labels.12}}</div>
                      </div>
                    </div>
                </div>
                </div>
                </div>
              </div>
            </div>
          </div>
          <div class="split-view-contents split-view-network-views hidden" id="network-views">
            <button id="network-close-button" ng-click="hideDetails()"></button>
            <div class="tabbed-pane network-item-view visible">
              <div class="tabbed-pane-header">
                <div class="tabbed-pane-header-contents">
                  <div class="tabbed-pane-header-tabs">
                    <div ng-click="showTab(1)" ng-class="getTab(1)" class="tabbed-pane-header-tab selected"><span class="tabbed-pane-header-tab-title" title="">Headers</span></div>
                    <div ng-click="showTab(2)" ng-class="getTab(2)" class="tabbed-pane-header-tab"><span class="tabbed-pane-header-tab-title" title="">Cookies</span></div>
                    <div ng-click="showTab(3)" ng-class="getTab(3)" class="tabbed-pane-header-tab"><span class="tabbed-pane-header-tab-title" title="">Timing</span></div>
                  </div>
                </div>
              </div>
              <div class="tabbed-pane-content">
                <div ng-class="getVisibleTab(1)" class="resource-headers-view">
                  <ol class="outline-disclosure" tabindex="0">
                    <li>
                      <div class="header-name">Request URL:</div>
                      <div class="header-value source-code">{{selectedEntry.url}}</div>
                    </li>
                    <li>
                      <div class="header-name">Request Method:</div>
                      <div class="header-value source-code">{{selectedEntry.method}}</div>
                    </li>
                    <li>
                      <div class="header-name">Status Code:</div>
                      <img class="resource-status-image" src="Images/successGreenDot.png" title="{{selectedEntry.status}} {{selectedEntry.statusText}}">
                      <div class="header-value source-code">{{selectedEntry.status}} {{selectedEntry.statusText}}</div>
                    </li>
                    <li ng-show="selectedEntry.reqHeadersCount" class="request parent expanded" ng-click="toggleReqHeaders()">Request Headers<span class="header-count"> ({{selectedEntry.reqHeadersCount}})</span></li>
                    <ol class="request children expanded">
                      <li ng-repeat="header in selectedEntry._entry.request.headers | orderBy:'name'">
                        <div class="header-name">{{header.name}}:</div>
                        <div class="header-value source-code">{{header.value}}</div>
                      </li>
                    </ol>
                    <li ng-show="selectedEntry.resHeadersCount" class="response parent expanded" ng-click="toggleResHeaders()">Response Headers<span class="header-count"> ({{selectedEntry.resHeadersCount}})</span></li>
                    <ol class="response children expanded">
                      <li ng-repeat="header in selectedEntry._entry.response.headers | orderBy:'name'">
                        <div class="header-name">{{header.name}}:</div>
                        <div class="header-value source-code">{{header.value}}</div>
                      </li>
                    </ol>
                  </ol>
                </div>
                <div ng-class="getVisibleTab(2)"  class="resource-cookies-view">
                  <div class="fill visible">
                    <div class="data-grid visible" tabindex="0">
                      <table class="header">
                        <colgroup span="8">
                          <col style="width: 24.056189640035118%; ">
                          <col style="width: 34.06496927129061%; ">
                          <col style="width: 7.023705004389816%; ">
                          <col style="width: 7.023705004389816%; ">
                          <col style="width: 7.023705004389816%; ">
                          <col style="width: 6.935908691834943%; ">
                          <col style="width: 6.935908691834943%; ">
                          <col style="width: 6.935908691834943%; ">
                        </colgroup>
                        <tbody>
                          <tr>
                            <th class="0-column sortable"><div>Name</div></th>
                            <th class="1-column sortable"><div>Value</div></th>
                            <th class="2-column sortable"><div>Domain</div></th>
                            <th class="3-column sortable"><div>Path</div></th>
                            <th class="4-column sortable"><div>Expires</div></th>
                            <th class="5-column sortable"><div>Size</div></th>
                            <th class="6-column sortable"><div>HTTP</div></th>
                            <th class="7-column sortable"><div>Secure</div></th>
                            <th class="corner"></th>
                          </tr>
                        </tbody>
                      </table>
                      <div class="data-container">
                        <table class="data">
                          <colgroup span="8">
                            <col style="width: 24.056189640035118%; ">
                            <col style="width: 34.06496927129061%; ">
                            <col style="width: 7.023705004389816%; ">
                            <col style="width: 7.023705004389816%; ">
                            <col style="width: 7.023705004389816%; ">
                            <col style="width: 6.935908691834943%; ">
                            <col style="width: 6.935908691834943%; ">
                            <col style="width: 6.935908691834943%; ">
                          </colgroup>
                          <tbody>
                            <tr class="request revealed row-group parent expanded">
                              <td class="0-column disclosure"><div>Request Cookies</div></td>
                              <td class="1-column"><div></div></td>
                              <td class="2-column"><div></div></td>
                              <td class="3-column"><div></div></td>
                              <td class="4-column"><div></div></td>
                              <td class="5-column right"><div></div></td>
                              <td class="6-column centered"><div></div></td>
                              <td class="7-column centered"><div></div></td>
                            </tr>
                            <tr class="revealed" ng-repeat="cookie in selectedEntry._entry.request.cookies">
                              <td class="0-column disclosure" style="padding-left: 15px; "><div>{{cookie.name}}</div></td>
                              <td class="1-column"><div>{{cookie.value}}</div></td>
                              <td class="2-column"><div>{{cookie.domain}}</div></td>
                              <td class="3-column"><div>{{cookie.path}}</div></td>
                              <td class="4-column"><div></div></td>
                              <td class="5-column right"><div></div></td>
                              <td class="6-column centered"><div></div></td>
                              <td class="7-column centered"><div></div></td>
                            </tr>
                            <tr class="response revealed row-group parent expanded">
                              <td class="0-column disclosure"><div>Response Cookies</div></td>
                              <td class="1-column"><div></div></td>
                              <td class="2-column"><div></div></td>
                              <td class="3-column"><div></div></td>
                              <td class="4-column"><div></div></td>
                              <td class="5-column right"><div></div></td>
                              <td class="6-column centered"><div></div></td>
                              <td class="7-column centered"><div></div></td>
                            </tr>
                            <tr class="revealed" ng-repeat="cookie in selectedEntry._entry.response.cookies">
                              <td class="0-column disclosure" style="padding-left: 15px; "><div>{{cookie.name}}</div></td>
                              <td class="1-column"><div>{{cookie.value}}</div></td>
                              <td class="2-column"><div>{{cookie.domain}}</div></td>
                              <td class="3-column"><div>{{cookie.path}}</div></td>
                              <td class="4-column"><div></div></td>
                              <td class="5-column right"><div></div></td>
                              <td class="6-column centered"><div></div></td>
                              <td class="7-column centered"><div></div></td>
                            </tr>
                            <tr class="filler">
                              <td class="0-column"></td>
                              <td class="1-column"></td>
                              <td class="2-column"></td>
                              <td class="3-column"></td>
                              <td class="4-column"></td>
                              <td class="5-column"></td>
                              <td class="6-column"></td>
                              <td class="7-column"></td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div ng-class="getVisibleTab(3)" class="resource-timing-view">
                  <table>
                    <tr>
                      <td>Receiving</td>
                      <td width="200px">
                        <div class="network-timing-row">
                          <span class="network-timing-bar-title">{{selectedEntry.receiveTime}}</span>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="split-view-resizer"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="popover custom-popup-vertical-scroll custom-popup-horizontal-scroll hidden" style="left:500px; top: 197px; width: 315px; height: 132px;">
    <div class="arrow"></div>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="components/jquery/jquery.min.js"><\/script>')</script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script>window.angular || document.write('<script src="components/angular/angular.min.js"><\/script>')</script>

  <script src="js/script.js"></script>
  <script src="js/libs/devTools.js"></script>
  <script src="js/libs/HAREntry.js"></script>
  <script src="js/controllers.js"></script>
</body>
</html>
